<template>
  <div>
    <h1>{{ msgB }}</h1>
    <button @click="handleClick">点击更新子组件B的信息</button>
  </div>
</template>
<script>
export default {
  name: 'CompomentB',
  data() {
    return {
      msgB: '这是子组件B',
    }
  },
  beforeCreate() {
    console.log('子组件B的beforecreate')
  },
  created() {
    console.log('子组件B的created')
  },
  beforeMount() {
    console.log('子组件B的beforeMount')
  },
  mounted() {
    console.log('子组件B的mounted')
  },
  beforeUpdate() {
    console.log('子组件B的beforeUpdate')
  },
  updated() {
    console.log('子组件B的update')
  },
  beforeDestroy() {
    console.log('子组件B的beforeDestory')
  },
  destroyed() {
    console.log('子组件B的destoryed')
  },
  activated() {
    console.log('B组件进来了')
  },
  deactivated() {
    console.log('B组件出去了')
  },
  methods: {
    handleClick() {
      this.msgB = '这是B的新信息'
    },
  },
}
</script>
